<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        面试题：react、vue中key有什么作用？（key的内部原理）

            1.虚拟DOM中key的作用：
                key是虚拟DOM的标识。数据变化，生成新虚拟DOM，进行新旧虚拟DOM差异比较。
            2.比较规则：
                （1）旧的里面找到新虚拟DOM相同的key：
                        1）内容没变，直接使用之前的真实DOM
                        2）改变，生成新的真实DOM，替换旧的
                （2）旧的里面未找到相同key
                        创建新的真实DOM，渲染到页面
            3.index作为key可能出现的问题：
                （1）破坏数据顺序操作：产生没有必要的真实DOM更新，页面无问题，但效率低
                （2）破坏数据同时结构包含输入类DOM：产生错误的DOM更新，使页面产生问题
            4.开发中选择key？
                （1）最好使用每条数据的唯一标识作为key，如id
                （2）若不存在破坏数据顺序操作，则可以使用index作为key
     -->
    <div id="root">
        <!-- 遍历数组 -->
        <button  @click.once="add()">点击一个人员</button>
        <h2>人员列表</h2>
            <ul>
                <li v-for="(item,index) in persons ":key="item.id">
                    {{item.name}}-{{item.age}}
                    <input type="text">
                </li>
            </ul>

  
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: "#root",

            data: {
                persons: [
                    { id: 0, name: "张三", age: 18 },
                    { id: 1, name: "李四", age: 20 },
                    { id: 2, name: "王五", age: 21 }
                ],
            },
            methods:{
                add(){
                   const p = { id: 4, name:"老刘", age:45 };
                   this.persons.unshift(p);
                }
            }
        })
    </script>
</body>

</html>